<template>
  <div class="editMenu">
    <!-- 手机界面 -->
    <div class="phone">
      <div class="content">
        <div
          :class="{ item: true, visiable: menu1_index === index }"
          v-for="(item, index) in button"
          :key="index"
        >
          <div
            :class="{ 'my-button': true, select: menu2_index === index2 }"
            v-for="(item2, index2) in item.sub_button"
            :key="index2"
            @click="addClass2(index, index2)"
          >
            {{ item2.name }}
          </div>
          <div
            class="my-button"
            v-if="button.length <= 3 && menu1_index === index"
            icon="el-icon-plus"
            plain
            @click="addMenu2(index)"
          >
            <i class="el-icon-plus"></i>添加子菜单
          </div>
        </div>
        <div class="item" v-if="button.length <= 2"></div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <div
          :class="{ 'my-button': true, select: menu1_index === index }"
          v-for="(item, index) in button"
          :key="index"
          @click="addClass(index)"
        >
          <img
            src=""
            alt=""
            v-if="item.sub_button && item.sub_button.length"
            class="more_icon"
          />
          {{ item.name }}
        </div>

        <div
          class="my-button"
          v-if="button.length <= 2"
          icon="el-icon-plus"
          plain
          @click="addMenu1"
        >
          <i class="el-icon-plus"></i> 添加菜单
        </div>
      </div>
    </div>
    <!-- 编辑区域 -->
    <div class="edit">
      <div v-if="menu1_index === false" class="noedit">点击左侧菜单进行编辑操作</div>
      <div v-else>
        <div class="edit-title">
          <h4>当前菜单</h4>
          <div @click="deleteMenu">删除{{(menu2_index !== false) ? '子' : ''}}菜单</div>
        </div>
        <el-form ref="ruleForm" @validate="saveName" :model="ruleForm" :rules="rules" label-width="100px" label-position='left'>
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="ruleForm.name"  placeholder="仅支持中英文和数字，字数不超过8个汉字或16个字母"></el-input>
          </el-form-item>
          <el-form-item label="菜单内容" v-if="!(button[menu1_index].sub_button && menu2_index === false)">
            <el-radio-group v-model="ruleForm.type">
              <el-radio label="view">跳转网页</el-radio>
              <el-radio label="view_limited" disabled>发送消息</el-radio>    
              <el-radio label="miniprogram" disabled>地理位置</el-radio>
              <el-radio label="miniprogram" disabled>拍照相册</el-radio>
              <el-radio label="miniprogram" disabled>关联小程序</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="页面地址" prop="url" v-if="!(button[menu1_index].sub_button && menu2_index === false)">
            <el-input v-model="ruleForm.url" placeholder="请输入公众号相关链接"></el-input>
          </el-form-item>
        </el-form>
        
      </div>
      <!-- {{this.button}} -->
    </div>

     <el-button type="primary" size="small" @click="save" class="savebutton">提交保存</el-button>
  </div>
</template>
<script>
// TODO: 二级菜单文字过多会影响样式；

var validateName = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入菜单名称'))
  }else if (!/^[\u4e00-\u9fa5a-zA-Z0-9]+$/.test(value)) {
    callback(new Error('字符串中包含除中文、数字、英文以外的字符'))
  } else if (value.replace(/[\u4e00-\u9fa5]/g, "**").length > 8) {
    callback(new Error('仅支持中英文和数字，字数不超过4个汉字或8个字母'));
  } else {
    callback()
  }
};
var validateName2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入菜单名称'))
  }else if (!/^[\u4e00-\u9fa5a-zA-Z0-9]+$/.test(value)) {
    callback(new Error('字符串中包含除中文、数字、英文以外的字符'))
  } else if (value.replace(/[\u4e00-\u9fa5]/g, "**").length > 16) {
    callback(new Error('仅支持中英文和数字，字数不超过8个汉字或16个字母'));
  } else {
    callback()
  }
};
export default {
  name: "editMenu",
  data() {
    return {
      menu1_index: false,
      menu2_index: false,
      button: [
        {
          name: "今日歌曲",
          sub_button: [
            {
              type: "view",
              name: "好汉歌",
              url: "http://www.soso.com/",
            },
          ],
        },
      ],
      ruleForm: {
        name: "",
        type: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: 'change' }],
        url: [
             { validator:function(rule,value,callback){
                              if(/http[s]{0,1}:\/\/([\w.]+\/?)\S*/.test(value) == false){
                                  callback(new Error("请输入正确的Url"));
                              }else{
                                  callback();
                              }
                          }, trigger: 'blur'
             },
        ],
      },
    };
  },
  methods: {
    // 选中一级菜单样式
    addClass(i) {
      this.menu1_index = i;
      this.menu2_index = false;
      this.ruleForm = this.button[i];

      // 替换规则
      this.rules.name = [{ validator: validateName, trigger: 'change' }]
    },
    // 选中二级菜单样式
    addClass2(index, index2) {
      this.menu2_index = index2;
      console.log(this.button[index]);
      this.ruleForm = this.button[index].sub_button[index2];

      this.rules.name = [{ validator: validateName2, trigger: 'change' }]
    },
    // 失去焦点替换菜单文字
    saveName(val,val2) {
    // eslint-disable-next-line no-debugger
    //  debugger
      if (val === 'name' && val2) {
        if (this.menu1_index !== false) {
          if (this.menu2_index !== false) {
            // console.log(this.button[this.menu1_index].sub_button);
            this.button[this.menu1_index].sub_button[
              this.menu2_index
            ].name = this.ruleForm.name;
            
          } else {
            this.button[this.menu1_index].name = this.ruleForm.name;
          }
        }
      }
      this.$forceUpdate();
    },
    // 添加一级菜单
    addMenu1() {
      this.button.push({
        type: "view",
        name: "菜单名称",
        url: "",
      });
      // this.menu1_index = this.button.length - 1;
    },
    // 添加二级菜单
    addMenu2(index) {
      var sub_button = this.button[index].sub_button;
      if (sub_button) {
        if (sub_button.length == 5) return;
        this.button[index].sub_button.push({
          type: "view",
          name: "子菜单名称",
          url: "",
        });
      } else {

        this.button[index] = {
          name: this.button[index].name,
          sub_button: [
            {
              type: "view",
              name: "子菜单名称",
              url: "",
            },
          ]
        }
      }

      this.$forceUpdate();
      console.log(this.button);
    },
    // 删除菜单
    deleteMenu() {
      // eslint-disable-next-line no-debugger
      // debugger
      // 删除一级菜单
      if (this.menu2_index === false) {
        this.button.splice(this.menu1_index, 1)      
      } else {
        // 删除二级菜单
        this.button[this.menu1_index].sub_button.splice(this.menu2_index, 1)
        if (this.button[this.menu1_index].sub_button.length === 0) {
          this.button[this.menu1_index] = {
            type: "view",
            name: this.button[this.menu1_index].name,
            url: "",
          }
        }
      }

      this.menu1_index = false
      this.menu2_index = false
    },
    testURL(url) {
      if(/http[s]{0,1}:\/\/([\w.]+\/?)\S*/.test(url) == false){
          return false;
      }else{
          return true;
      }
    },
    // 保存数据
    save() {
      for(let i of this.button) {
        console.log(i)
        // 一级菜单
        if (i.url || i.url === '') {
          if (!this.testURL(i.url)) {
             // eslint-disable-next-line no-debugger
          debugger
            this.addClass(this.button.indexOf(i))
            this.$nextTick(() => {
              this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  alert('submit!');
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            });
            return
          }
        } // 二级菜单
        else {
          // eslint-disable-next-line no-debugger
          debugger
          for(let ii of i.sub_button) {
            console.log(ii)
            if (!this.testURL(ii.url)) {
              var index = this.button.indexOf(i)
              var index2 = i.sub_button.indexOf(ii)
              this.addClass2(index, index2)
              this.$nextTick(() => {
                this.$refs.ruleForm.validate((valid) => {
                  if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
              });
              return
            }
          }
        }
      }
    }
  },
};
</script>
<style  scoped>
.editMenu {
  user-select: none;
  display: flex;
}
.phone {
  float: left;
  font-size: 14px;
  height: 600px;
  width: 310px;
  border: 1px solid #e7e7eb;
  position: relative;
}
.bottom {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
}
.my-button {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #333;
  outline: 1px solid #e7e7eb;
  flex: 1;
}

.select {
  outline: 1px solid #07c160;
  color: #07c160;
}

.content {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 60px;
  left: 0px;
  align-items: flex-end;
  /* flex-direction: column-reverse; */
}
.item {
  flex: 1;
  visibility: hidden;
}

.edit {
  min-height: 560px;
  padding: 0 20px 20px;
  border: 1px solid #e7e7eb;
  flex: 1;
  background: #f4f5f9;
}
.edit-title {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e7e7eb;
  margin-bottom: 20px;
}
.edit-title h4 {
  float: left;
  margin: 0;
  padding: 0;
  font-size: 14px;
  text-align: left;
}
.edit-title div {
  float: right;
  width: 80px;
  cursor: pointer;
  font-size: 14px;
}
.edit /deep/ .el-form-item__content {
  text-align: left;
}
.visiable {
  visibility: visible;
}
.more_icon {
  position: relative;
  top: -2px;
}
.noedit{
  padding: 20% 0 0;
}
.savebutton{
  position: absolute;
  bottom: 20px;
  left: 48%;
}
</style>